<template>
  <ElConfigProvider :locale="zhCn">
    <div class="not-table">
      <ElTabs v-model="data.type" class="demo-tabs" @tab-click="onSearch">
        <ElTabPane label="当天不检测" :name="1"></ElTabPane>
        <ElTabPane label="永远不检测" :name="2"></ElTabPane>
      </ElTabs>
      <div class="not-table-search">
        <ElSelect
          style="width: 220px; margin-right: 20px;"
          v-model="data.platformNo"
          placeholder="请选择平台"
          clearable
          @change="onChange"
        >
          <ElOption v-for="item in options" :key="item.val" :label="item.name" :value="item.val" />
        </ElSelect>
        <DateRangePicker
          style="width: 220px; flex-grow: 0;"
          v-model:startDate="data.dateStart"
          v-model:endDate="data.dateEnd"
          type="daterange"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="请选择日期"
          :clearable="false"
          @change="onChange"
        />
      </div>
      <ElTable :data="list">
        <ElTableColumn fixed="left" type="index" label="#" :min-width="50" align="center" />
        <ElTableColumn v-if="data.type === 1" prop="date" min-width="180" label="服务日期" />
        <ElTableColumn prop="platformName" min-width="140" label="平台" />
        <ElTableColumn prop="shopName"  min-width="160" label="店铺名称" />
        <ElTableColumn prop="accountNo"  min-width="160" label="数据账号" />
        <ElTableColumn prop="accountName" min-width="160" label="子账号名称" />
        <ElTableColumn fixed="right" prop="action" width="80" label="操作">
          <template #default="{ row }">
            <ElButton type="primary" link @click="onCancel(row)">取消</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        style="margin-top: 10px;"
        v-model:current-page="page.index"
        v-model:page-size="page.size"
        :hide-on-single-page="false"
        small
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        @change="getData"
      />
    </div>
  </ElConfigProvider>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue'
import { ElTabs, ElTabPane, ElTable, ElConfigProvider, ElTableColumn, ElSelect, ElOption, ElPagination, ElButton, ElMessageBox, ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import DateRangePicker from '@/components/form-item/DateRangePicker.vue'
import { getNotCheckPage, getListByNo, cancelNotCheck } from '../api'
import dayjs from 'dayjs'

const data = reactive({ type: 1, dateStart: dayjs().subtract(2, 'day').format('YYYY-MM-DD'), dateEnd: dayjs().format('YYYY-MM-DD'), platformNo: '' })
const page = reactive({ index: 1, size: 10 })
const loading = ref(false)
const list = ref<any[]>([])
const total = ref(0)

const options = ref<any[]>([])
const getOptions = () => {
  getListByNo({ dictNo: 'platform' })
    .then(res => {
      options.value = res || []
    })
}

const getData = () => {
  loading.value = true
  getNotCheckPage({
    page: page,
    sort: { sidx: 'createTime', order: 'desc' },
    condition: data
  })
  .then(res => {
    console.log(res)
    list.value = res.list || []
    total.value = res.totalCount || 0
  })
  .finally(() => {
    loading.value = false
  })
}

const onChange = () => {
  page.index = 1
  getData()
}

const onSearch = () => {
  nextTick(() => {
    onChange()
  })
}

const onCancel = async row => {
  await ElMessageBox.confirm('是否确定取消？', '提示')
  await cancelNotCheck({ notCheckRecordId: row.notCheckRecordId })
  ElMessage.success('操作成功')
  onSearch()
}

onMounted(() => {
  getOptions()
  onSearch()
})
</script>

<style scoped lang="scss">
.not-table {
  margin: 0px 20px;
  padding-bottom: 20px;
  &-search {
    display: flex;
    margin-bottom: 15px;
  }
}
</style>
